{% extends "base.html" %}

{% block subtitle %}
  Profile
{% endblock subtitle %}

{% block content %}
  <div ng-controller="Profile">
    <div class="oppia-content">
      <div class="oppia-gallery-frame">
        <div>
          <strong>Email address</strong>: {{user_email}}
          <br><br>
          <strong>Username</strong>:
          {% if username %}
            {{username}}
          {% else %}
            <em>Not yet selected</em>
          {% endif %}
        </div>

        <hr>

        <div ng-show="!isEmpty(ownedExplorations)">
          <h5>Explorations I manage</h5>
          <ul>
            <li ng-repeat="(expId, expData) in ownedExplorations">
              <span ng-if="expData.rights.status == 'private'">
                (Private)
              </span>
              <a href="/create/<[expId]>"><[expData.title]></a>
            </li>
          </ul>
        </div>

        <div ng-show="!isEmpty(editableExplorations)">
          <h5>Explorations I collaborate on</h5>
          <ul>
            <li ng-repeat="(expId, expData) in editableExplorations">
              <span ng-if="expData.rights.status == 'private'">
                (Private)
              </span>
              <a href="/create/<[expId]>"><[expData.title]></a>
            </li>
          </ul>
        </div>

        <div ng-show="!isEmpty(viewableExplorations)">
          <h5>Explorations I can playtest</h5>
          <ul>
            <li ng-repeat="(expId, expData) in viewableExplorations">
              <a href="/create/<[expId]>"><[expData.title]></a>
            </li>
          </ul>
        </div>

        <div ng-show="isEmpty(ownedExplorations) && isEmpty(editableExplorations) && isEmpty(viewableExplorations)">
          <em>No explorations here yet!</em>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('/profile/Profile.js') }}
  </script>
{% endblock footer_js %}
